<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    // 中转路由，获取各种Session信息
    if (session.getAttribute("studentList") == null) {
        response.sendRedirect("/transit/students");
    }
%>
<html>
<head>
    <title>学生管理</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/student.css">
</head>
<body>
<div class="header">
    <h1>学生信息管理</h1>
</div>

<!-- 添加学生弹窗 -->
<div id="addModal" class="modal">
    <div class="modal-content">
        <span class="close">&times;</span>
        <h2>添加新学生</h2>
        <form id="addForm">
            <div class="form-group">
                <label>学号</label>
                <input type="text" name="studentNo" required>
            </div>
            <div class="form-group">
                <label>姓名</label>
                <input type="text" name="realName" required>
            </div>
            <div class="form-group">
                <label>性别</label>
                <select name="gender">
                    <option value="男">男</option>
                    <option value="女">女</option>
                </select>
            </div>
            <div class="form-group">
                <label>班级</label>
                <input type="text" name="className">
            </div>
            <div class="form-group">
                <label>入学日期</label>
                <input type="date" name="admissionDate">
            </div>
            <div class="form-actions">
                <button type="button" class="cancel-btn">取消</button>
                <button type="submit" class="submit-btn">提交</button>
            </div>
        </form>
    </div>
</div>
<!-- 编辑学生弹窗 -->
<div id="editModal" class="modal">
    <div class="modal-content">
        <span class="close">&times;</span>
        <h2>编辑学生信息</h2>
        <form id="editForm">
            <input type="hidden" name="id">
            <div class="form-group">
                <label>学号</label>
                <input type="text" name="studentNo" readonly>
            </div>
            <div class="form-group">
                <label>姓名</label>
                <input type="text" name="realName">
            </div>
            <div class="form-group">
                <label>性别</label>
                <input type="text" name="gender">
            </div>
            <div class="form-group">
                <label>班级</label>
                <input type="text" name="className">
            </div>
            <div class="form-group">
                <label>入学日期</label>
                <input type="text" name="admissionDate">
            </div>
            <div class="form-actions">
                <button type="button" class="cancel-btn">取消</button>
                <button type="submit" class="submit-btn">保存</button>
            </div>
        </form>
    </div>
</div>
<!-- 删除确认弹窗 -->
<div id="deleteModal" class="modal">
    <div class="modal-content">
        <h2>确认删除</h2>
        <p>确定要删除学号为 <span id="deleteStudentNo"></span> 的学生吗？</p>
        <input type="hidden" id="deleteId">
        <div class="form-actions">
            <button type="button" class="cancel-btn">取消</button>
            <button type="button" class="confirm-btn">确认删除</button>
        </div>
    </div>
</div>
<script>
    // 墨兮提醒：这里要添加事件绑定哦！
    document.querySelector('.add-btn').addEventListener('click', function() {
        document.getElementById('addModal').style.display = 'block';
    });

    // 编辑按钮点击事件（需要动态绑定到每行的编辑按钮）
    function bindEditButtons() {
        document.querySelectorAll('.edit-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                const row = this.closest('tr');
                // 这里应该从行中获取数据填充到编辑表单
                for (let i = 0; i < 6; i++) {
                    document.getElementById("editForm").getElementsByTagName("input")[i].value = row.cells[i].textContent;
                }
                document.getElementById('editModal').style.display = 'block';
            });
        });
    }

    // 删除按钮点击事件
    function bindDeleteButtons() {
        document.querySelectorAll('.delete-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                const row = this.closest('tr');
                // 这里应该从行中获取学号显示在确认框
                document.getElementById('deleteStudentNo').textContent = row.cells[0].textContent;
                // 这里应该从行中获取ID传递给删除请求
                document.getElementById('deleteId').value = row.cells[0].textContent;
                document.getElementById('deleteModal').style.display = 'block';
            });
        });
    }

    // 关闭弹窗
    document.querySelectorAll('.close, .cancel-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            document.querySelectorAll('.modal').forEach(modal => {
                modal.style.display = 'none';
            });
        });
    });

    // 表单提交（需要实现AJAX请求）
    document.getElementById('addForm').addEventListener('submit', function(e) {
        e.preventDefault();
        // 这里应该发送添加请求
    });

    document.getElementById('editForm').addEventListener('submit', function(e) {
        e.preventDefault();
        // 这里应该发送编辑请求
    });

    document.querySelector('.confirm-btn').addEventListener('click', function() {
        // 这里应该发送删除请求
    });

    // 页面加载完成后绑定事件
    setTimeout(() => {
        bindEditButtons();
        bindDeleteButtons();
    }, 500);
</script>

<div class="container">
    <div class="search-box">
        <label>
            <input type="text" placeholder="输入学号或姓名...">
        </label>
        <button>搜索</button>
        <button class="add-btn">+ 添加学生</button>
    </div>

    <table class="student-table">
        <thead>
        <tr>
            <th style="display: none;">用户ID</th>
            <th>学号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>班级</th>
            <th>入学日期</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <%-- 使用JSTL循环显示学生数据 --%>
<%--        <jsp:useBean id="studentList" scope="session" type="java.util.List<com.wutong.eams.entity.StudentInfo>"/>--%>
        <c:forEach items="${studentList}" var="student">
            <tr>
                <td style="display: none;">${student.userId}</td>
                <td>${student.studentNo}</td>
                <td>${student.realName}</td>
                <td>${student.gender == 'M' ? '男' : (student.gender == 'F' ? '女' : '未知')}</td>
                <td>${student.className}</td>
                <td>${student.admissionDate}</td>
                <td>
                    <button class="edit-btn">编辑</button>
                    <button class="delete-btn">删除</button>
                </td>
            </tr>
        </c:forEach>
        </tbody>
    </table>

    <%-- 分页控件 --%>
    <div class="pagination">
<%--        <jsp:useBean id="currentPage" scope="session" type="java.lang.Integer"/>--%>
<%--        <jsp:useBean id="totalPages" scope="session" type="java.lang.Integer"/>--%>
<%--        <jsp:useBean id="totalCount" scope="session" type="java.lang.Integer"/>--%>
        <c:if test="${currentPage > 1}">
            <a href="?page=1" class="page-first">首页</a>
            <a href="?page=${currentPage-1}" class="page-prev">上一页</a>
        </c:if>

        <c:forEach begin="1" end="${totalPages}" var="i">
            <c:choose>
                <c:when test="${i == currentPage}">
                    <span class="page-current">${i}</span>
                </c:when>
                <c:otherwise>
                    <a href="?page=${i}" class="page-number">${i}</a>
                </c:otherwise>
            </c:choose>
        </c:forEach>

        <c:if test="${currentPage < totalPages}">
            <a href="?page=${currentPage+1}" class="page-next">下一页</a>
            <a href="?page=${totalPages}" class="page-last">末页</a>
        </c:if>

        <span class="page-info">
                共 ${totalCount} 条记录 | 第 ${currentPage}/${totalPages} 页
            </span>
    </div>
</div>
</body>
</html>
